<template>
  <div class="about">
    <div id="main" style="width: 1300px; height: 500px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "Abuot",
  data() {
    return {
      school: [],
      // num:[]
    };
  },
  mounted() {
    this.ajax
      .get("http://api.aulence.com/mydata/roles/role-info.php?goodsID=12")
      .then((res) => {
        // console.log(res);
        res.data.forEach(re=>{
          
          this.school.push({value:re.roleSkills.length,name:re.roleName});
          // this.num.push(re.roleSkills.length);
        })
        console.log(this.school);
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
          title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: this.school,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
        });
      })
      .catch((res) => {
        console.log("获取失败", res);
      });
  },
};
// 接下来的使用就跟之前一样，初始化图表，设置配置项
</script>
